<template>
    <div class="t-td"
         :style="{ 'border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        align: String,
        color: String
    },
    data() {
        return {
            thBorder: '1',
            borderColor: '#eeeeee',
            fontSize: '14',
            // color: '#555c60',
            tdAlign: 'left'
        };
    },
    inject: ['table', 'tr'],

    created() {
        this.thBorder = this.table.border;
        this.borderColor = this.table.borderColor;
        this.fontSize = this.tr.fontSize;

        if (this.align) {
            this.tdAlign = this.align;
        } else if (this.tr.align) {
            this.tdAlign = this.tr.align
        }
    },
    computed: {
        tdAlignCpd() {
            let nameAlign = '';
            switch (this.tdAlign) {
                case 'left':
                    nameAlign = 'flex-start'
                    break;
                case 'center':
                    nameAlign = 'center'
                    break;
                case 'right':
                    nameAlign = 'flex-end'
                    break;
                default:
                    nameAlign = 'center'
                    break;
            }
            return nameAlign
        }
    }
};
</script>

<style>
.t-td {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border-top: 1px #eeeeee solid;
    border-left: 1px #eeeeee solid;
    text-align: center;
    color: #555c60;
    font-size: 14px;
}
</style>
